<!DOCTYPE html>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ page language="java" contentType="text/html;  charset=utf-8"
	pageEncoding="utf-8"%>
<html lang="ko">
	<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    
    <title>회원가입</title>
    
    <link href="/resources/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="/resources/css/font-awesome.css">
    <link rel="stylesheet" href="/resources/css/ionicons.min.css">
    <link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/nanumgothic.css">
    <link rel="stylesheet" href="/resources/iCheck/skins/square/grey.css" >
    <style type="text/css">
    	body {
			background-color: #EEF2F5;
		}
		#sign-form { padding: 12px; }
		.title { color:#50555A; width:100%; text-align:center; font-size:18px; padding:5px 0 18px 0; font-weight:bold; }
		.input-form { position:relative; width:100%; }
		.input-form > .icon {position:absolute; left: 12px; font-size:28px; color: #aaa; }
		.input-form > .check {position:absolute; right: 12px; top:8px; font-size:18px; color: #4A87EE; display: none; }
		.input-form > input{ padding:10px 0 10px 46px; width:100%; border:0; border-bottom:1px solid #eee; outline:none; border-radius:0;box-shadow:none; }
		.sign-btn{ width:100%; padding: 10px 0; border:0; background-color:#BBBBBB; margin-top:10px; color:#fff; font-size:16px; border-bottom:2px solid #A19BA4; outline:none; }
		.line{ margin:15px auto;height:1px;width:90%;background-color:#d3d3d3;text-align: center;position:relative; }
		.line-title { position:relative;top:-9px;background-color:#EEF2F5;padding:0 10px;color:#808080;font-size:13px; }
		.sns-form { padding: 15px 12px 30px 12px; }
		.sns-btn{ position:relative; padding:12px 0; color:#fff; width:100%; margin-bottom:5px; border:0; }
    </style>
</head>
<body>
<form method="post" id="sign-form">
	<div class="title">회원가입</div>
	<div class="input-form" ><i class="icon ion-ios7-email"></i><input type="text" id="inputEmail" name="inputEmail" placeholder="이메일" tabindex="1" onblur="checkEmail(this)" maxlength="45"><i class="check ion-checkmark"></i></div>
	<div class="input-form" ><i class="icon ion-ios7-locked"></i><input type="password" id="inputPassword" name="inputPassword" placeholder="비밀번호" tabindex="2" onblur="checkPassword(this)" maxlength="20"><i class="check ion-checkmark"></i></div>
	<div class="input-form" ><i class="icon ion-ios7-home"></i><input type="text" id="inputId" name="inputId" placeholder="아이디" tabindex="3" onblur="checkId(this)" maxlength="14"><i class="check ion-checkmark"></i></div>
	<div class="input-form" ><i class="icon ion-ios7-person"></i><input type="text" id="inputName" name="inputName" placeholder="이름" tabindex="4" onblur="checkName(this)" maxlength="30"><i class="check ion-checkmark"></i></div>
	<div style="margin-top:10px;">
		<label><input type="radio" id="optionsGender" name="iCheck" value="female" tabindex="5"> 여성</label> 
		<label style="margin-left:6px;"><input type="radio" id="optionsGender" name="iCheck" value="male" tabindex="6"> 남성</label>
	</div>
	<div><button type="button" class="sign-btn" tabindex="7" onclick="signup(this)">가입</button></div>
	<p style="color:#666;font-size:12px;text-align:left;margin-top:8px;">계정을 만듦으로써 Faeple의 <a href="#"><strong>서비스 약관</strong></a> 및 <a href="#"><strong>개인정보 보호 정책</strong></a>에 동의합니다.</p>
</form>
<div class="line"><span class="line-title">SNS 가입</span></div>
<div class="sns-form">
	<button type="button" class="sns-btn" style="background-color:#3C57A2;" title="페이스북으로 가입하기" onclick="fb_login(this);"><span style="position: absolute; left:15px; top:11px; font-size: 16px;"><i class="fa fa-facebook fa-lg"></i></span>페이스북으로 가입하기</button>
	<button type="button" class="sns-btn" style="background-color:#AF9A83;" title="인스타그램으로 가입하기"  onclick="window.open('https://api.instagram.com/oauth/authorize/?client_id=1211a537d5c444c8a06c8d73bdc93bc6&redirect_uri=http://faeple.com/connectInstgram&response_type=code','Instagram','resizable=no width=500 height=380 scrollbars=yes')"><img src="/resources/img/instagram-icon.png" width="20" height="20" style="position: absolute; left:15px;">인스타그램으로 가입하기</button>
	<button type="button" class="sns-btn" style="background-color:#00ACED;" title="트위터로 가입하기" onclick="window.open('/twitterLogin','twitter','resizable=no width=720 height=430')"><span style="position: absolute; left:15px; top:11px;"><i class="fa fa-twitter fa-lg"></i></span>트위터로 가입하기</button>
</div>
</body>
<script src="/resources/js/jquery-1.11.0.js"></script>
<script src="/resources/js/jquery-ui-1.10.4.custom.min.js"></script>
<script src="/resources/js/icheck.min.js"></script>
<script type="text/javascript">
	var check1 = false;
	var check2 = false;
	var check3 = false;
	var check4 = false;
	
   	$(function(){
   		$("input[name='iCheck']").iCheck({
   			radioClass: 'iradio_square-grey'
   		});
   	});
   	
   	function checkEmail(el){
   		if(el.value == ""){
   			alert("이메일을 입력해 주세요");
   			$(el).focus();
   			check1 = false;
   			return false;
   		}
   		eCheck=/^[_a-zA-Z0-9]+([-+.][_a-zA-Z0-9]+)*@([0-9a-zA-Z_-]+)(\.[0-9a-zA-Z_-]+){1,2}$/i;
		if(eCheck.test(el.value)){
			var data = "email="+el.value;
			$.ajax({
			    type : "get"
			    , url : "/checkEmail"
			    , data : data
			    , dataType : "text"
			    , timeout : 5000
			    , error : function(request, status, error) {
			    	
			    }
			    , success : function(response) {
			    	if(response == "true"){
			    		$(el).next().show();
			    		check1 = true;
			    	}else{
			    		alert("이미 사용중인 이메일 입니다");
			    		$(el).focus();
			    		check1 = false;
			    	}
			    }
			    , beforeSend: function() {
			    	
			    }
			});
		}else{
			alert("올바른 형식의 이메일을 입력해 주세요");
			$(el).focus();
			check1 = false;
		}
   	}
   	
   	function checkPassword(el){
   		if(el.value == ""){
   			alert("비밀번호를 입력해 주세요");
   			$(el).focus();
   			check2 = false;
   			return false;
   		}
   		if(el.value.length < 5){
   			alert("비밀번호를 최소 6자 이상으로 해주세요");
   			check2 = false;
   			$(el).focus();
   			return false;
   		}
   		check2 = true;
   		$(el).next().show();
   		return true;
   	}
   	
   	function checkId(el){
   		if(el.value == ""){
   			alert("아이디를 입력해 주세요");
   			$(el).focus();
   			check3 = false;
   			return false;
   		}
   		idCheck=/[\ㄱ-ㅎㅏ-ㅣ가-힣|\.|\/]/g;
   		if(idCheck.test(el.value)){
   			alert("아이디는 영문만 가능합니다");
   			$(el).focus();
   			check3 = false;
   			return false;
   		}
   		if(el.value.length < 4){
   			alert("아이디를 최소 4글자 이상으로 해주세요");
			check3 = false;
		}else{
			var data = "id="+el.value;
			$.ajax({
			    type : "get"
			    , url : "/checkId"
			    , data : data
			    , dataType : "text"
			    , timeout : 5000
			    , error : function(request, status, error) {
			    	
			    }
			    , success : function(response) {
			    	if(response == "true"){
			    		$(el).next().show();
			    		check3 = true;
			    	}else{
			    		alert("이미 존재하는 아이디 입니다");
			    		$(el).focus();
			    		check3 = false;
			    	}
			    }
			    , beforeSend: function() {
			    	
			    }
			});
		}
   	}
   	
   	function checkName(el){
   		if(el.value == ""){
   			alert("이름을 입력해 주세요");
   			$(el).focus();
   			check4 = false;
   			return false;
   		}
   		check4 = true;
   		$(el).next().show();
   	}
   	
   	function signup(el){
   		if(check1 && check2 && check3 && check4){
			if($("input:radio[id='optionsGender']").is(":checked") != false){
				var f = document.getElementById("sign-form");
				f.action = "/memberRegist";
				f.submit();
			}else{
				$(el).parent().effect("shake",{times:2},200);
			}
		}else{
			$(el).parent().effect("shake",{times:2},200);
		}
   	}
</script>
</html>